import React, {Component} from "react";
import _ from "lodash";
import "./AudioPlay.css";
import "./static/style.css"
import {Alert, Fade, Grid, Snackbar} from "@mui/material";
import PubSub from 'pubsub-js'
import {getMglyric, getMgPlayMusic} from "../../utils/request/migurequest";
import Loading from "../Loading/Loading";
import {Lrc} from 'react-lrc';
import {getQlyric} from "../../utils/request/qrequest";
import {getKwlyric} from "../../utils/request/kwrequest";
import {getKglyric} from "../../utils/request/kgrequest";

const store = window.electron_store;

const {get163PlayMusic,get163lyric} = require("../../utils/request/163request")
const {getQPlayMusic} = require("../../utils/request/qrequest")
const {getKgPlayMusic} = require("../../utils/request/kgrequest")
const {getKwPlayMusic} = require("../../utils/request/kwrequest")


/**
 * 前端音乐播放器
 * create by willghy
 * @class AudioPlay
 * @extends {Component}
 */

function FromIco(props){
  const {from} = props;
  let src = "";
  switch (from) {
    case '163':
      src = './png163.png';
      break;
    case 'qq':
      src = './icoqq.png';
      break;
    case 'migu':
      src = './pngmigu.png';
      break;
    case 'kuwo':
      src = './pngkuwo.png';
      break;
    case 'kugou':
      src = './pngkugou.png';
      break;
  }
  return <img src={src} width={25} height={25}/>
}

class AudioPlay extends Component {
  constructor(props) {
    super(props);
    let load = this.loadLocalStorage() || {};
    let n = {};
    if(load && load.currentMusic){
      n = load.currentMusic;
    }else {
      if(load && load.musicList){
        n = load.musicList[0];
      }
    }
    this.state = {
      // 是否暂停状态
      isPause: false,
      // 当前音乐列表
      musicList: load.musicList || [],
      // 当前音乐
      currentMusic: n,
      // 总时间
      totalTime: "00:00",
      // 当前播放时间
      currentTime: "00:00",
      // 进度条item是否可拖动
      processItemMove: false,
      // 音量条item是否可拖动
      volumeProcessItemMove: false,
      // 音量控制显示
      volumeControl: false,
      // 当前的播放模式 1列表循环 2随机 3单曲
      playMode: load.playMode ||  1,
      // 歌单显示控制
      isMusicListShow: false,
      open:false,
      //加载条是否显示
      loading:false,
      //歌词组件相关
      lrcString:'',
      lrcNow:0

    };
  }


  componentDidUpdate(prevProps, prevState, snapshot) {
    if(prevState.currentMusic) {
      if (this.state.currentMusic) {
        // 当前音乐更新了
        if (prevState.currentMusic.id !== this.state.currentMusic.id) {
          this.resetProcess();
          if (this.state.isPause && !this.state.currentMusic.needInit) {
            this.onPlay();
          }
        }
      } else {
        if (this.state.musicList !== undefined && this.state.musicList.length > 0) {
          this.setState({currentMusic: this.state.musicList[0]})
        }
      }
    }
  }

  /**
   * {
   *                     id: "1",
   *                     title: "打上花火",
   *                     info: "DAOKO,米津玄師",
   *                     // resource: require("./resource/DAOKO,米津玄師 - 打上花火.mp3"),
   *                     resource: "",
   *                     time: "04:50",
   *                     img:
   *                         "http://singerimg.kugou.com/uploadpic/softhead/400/20160913/20160913140233132.jpg"
   *                 },
   */

  collectAllMusic = (msg,data) => {
    this.setState({loading:true});
    let rows = data.rows;
    let pre = this.state.musicList;
    let list = rows.map((r) => {
      return {
        title: r.name,
        info: r.singer,
        time: r.times,
        id: r.id,
        from: r.from,
        needInit: true,
        ...r
      }
    });
    let newlist = _.concat(list,pre);
    this.setState({musicList: _.uniqBy(newlist, 'id')})
    this.setState({loading:false});
  }
  addAllMusic = (msg,data) => {
    this.setState({loading:true});
    let rows = data.rows;
    let pre = this.state.musicList;
    let list = rows.map((r) => {
        return {
          title: r.name,
          info: r.singer,
          time: r.times,
          id: r.id,
          from: r.from,
          needInit: true,
          ...r
        }
    });
    let newlist = _.concat(list,pre);
    this.setState({musicList: _.uniqBy(newlist, 'id'),currentMusic:list[0]})
    if(this.audio.currentTime)
      this.audio.currentTime = 0;
    this.onPause();
    this.initMusic('初始化音乐',0).then(() => {
      this.setState({loading:false});
    })
  }

  addNowMusic = async (msg,data) => {
    this.setState({loading:true});
    let pre = this.state.musicList;
    let n =  {
        title: data.name,
        info: data.singer,
        time: data.times,
        id: data.id,
        from: data.from,
        needInit: true,
        ...data
      }
    pre.push(n)
    this.setState({musicList: _.uniqBy(pre, 'id')})
    this.saveLocalStorage();
    this.setState({loading:false});
  }

  playNewMusic =  async (msg,data) => {
    this.setState({loading:true});
    let flag = true;
    if(data.from === '163'){
      await get163PlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
        }else {
          let pre = this.state.musicList;
          pre.push({
            ...r,
            from:data.from
          })
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: r})

        }

      })
    }else if(data.from === 'qq'){
      await getQPlayMusic(data.id,data.albumId,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
        }else {
          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            from:data.from
          }
          pre.push(n)
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: n})
        }
      })
    }else if(data.from === 'kugou'){
      await getKgPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
        }else {
          let pre = this.state.musicList;

          pre.push({
            ...r,
            from:data.from
          })
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: r})
        }

      })
    }else if(data.from === 'kuwo'){
      await getKwPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
        }else {

          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            img: data.img,
            from:data.from
          }
          pre.push(n)
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: n})
        }

      })
    }else if(data.from === 'migu'){
      await getMgPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
        }else {
          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            from:data.from
          }
          pre.push(n)
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: n})
        }
      })
    }
    this.setState({loading:false});
    if(flag) {
      this.onSwitchAction();
      this.saveLocalStorage();
    }
  }
  initMusic =  async (msg,index) => {
    let data = this.state.musicList[index];
    let flag = true;
    if(data.from === '163'){
      await get163PlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          pre[index] = {
            ...pre[index],
            ...r
          }
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: pre[index]})

        }

      })
    }else if(data.from === 'qq'){
      await getQPlayMusic(data.id,data.albumId,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            from:data.from,
            ...r,
            time: data.times,
            ...pre[index]
          }
          pre[index] = n;
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: n})
        }
      })
    }else if(data.from === 'kugou'){
      await getKgPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          pre[index] = {
            ...pre[index],
            ...r
          }
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: pre[index]})
        }

      })
    }else if(data.from === 'kuwo'){
      await getKwPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {

          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            img: data.img,
            ...pre[index]
          }
          pre[index] = n;
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: n})
        }

      })
    }else if(data.from === 'migu'){
      await getMgPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            from:data.from,
            ...pre[index]
          }
          pre[index] = n;
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id'), currentMusic: n})
        }
      })
    }
    this.onSwitchAction();
    if(flag) {
      this.saveLocalStorage();
    }
  }
  componentDidMount() {
    PubSub.subscribe('playMusic',this.playNewMusic);
    PubSub.subscribe('addNowMusic',this.addNowMusic);
    PubSub.subscribe('addAllMusic',this.addAllMusic);
    PubSub.subscribe('collectAllMusic',this.collectAllMusic);
    const audio = this.audio;
    // 这里需要设置audio的canplay事件监听
    audio.addEventListener("canplay", () => {
      //获取总时间
      const totalTime = parseInt(audio.duration);
      this.setState({
        totalTime: this.getTime(totalTime)
      });
    });
    // 播放中添加时间变化监听
    audio.addEventListener("timeupdate", () => {
      const { processItemMove } = this.state;
      //获取当前播放时间
      const currentTime = parseInt(audio.currentTime);
      // 缓存对象
      const buffered = audio.buffered;
      // 当前缓存时间
      let bufferTime = 0;
      if (buffered.length !== 0) {
        bufferTime = buffered.end(buffered.length - 1);
      }
      // 当前缓存缓存宽度计算 500是进度条宽度
      const bufferWidth = 500 * (bufferTime / audio.duration);
      // 当前播放宽度计算 500是进度条宽度
      const playWidth = 500 * (audio.currentTime / audio.duration);
      // 如果正在拖动进度条的时候，不监听播放进度
      if (!processItemMove) {
        this.processPlayed.style.width = `${playWidth}px`;
        this.processItem.style.left = `${playWidth - 4}px`;
        // 未拖动时根据时间变化设置当前时间
        this.setState({
          currentTime: this.getTime(currentTime),
          lrcNow:parseInt(audio.currentTime*1000)
        });
      }
      this.processBuffered.style.width = `${bufferWidth}px`;
    });

    // 当前音乐播放完毕监听
    audio.addEventListener("ended", () => {
      this.endedPlayMusic();
    });
    audio.addEventListener("play",(r) => {
      //console.log(this.state.currentMusic)
      const {id,from} = this.state.currentMusic;
      //console.log(from)
      switch (from){
        case '163':
          get163lyric(id,(r) => {
            this.setState({lrcString:r})
          })
              break;
        case 'qq':
          getQlyric(id,(r) => {
            this.setState({lrcString:r})
          })
          break;
        case 'migu':
          getMglyric(id,(r) => {
            this.setState({lrcString:r})
          })
              break;
        case 'kuwo':
          getKwlyric(id,(r) => {
            this.setState({lrcString:r})
          })
          break;
        case 'kugou':
          getKglyric(id,this.state.currentMusic.albumid,(r) => {
            this.setState({lrcString:r})
          })
          break;
      }

    })
    // 初始化音量
    this.initVolumeProcess();
  }

  // 秒转换-分:秒的格式
  getTime = time => {
    if (time) {
      const minute = parseInt((time / 60) % 60);
      const second = parseInt(time % 60);
      let minuteText = `${minute}`;
      let secondText = `${second}`;
      if (minute < 10) {
        minuteText = `0${minute}`;
      }
      if (second < 10) {
        secondText = `0${second}`;
      }
      return `${minuteText}:${secondText}`;
    } else {
      return "00:00";
    }
  };

  // 播放
  onPlay = () => {
    const audio = this.audio;
    this.setState({ isPause: true });
    if((this.state.currentMusic.resource === undefined || this.state.currentMusic.resource === "") && !this.state.currentMusic.needInit){
      this.handleVIP();
    }else if(this.state.currentMusic.resource)
      audio.play();
  };

  // 暂停
  onPause = () => {
    const audio = this.audio;
    this.setState({ isPause: false });
    audio.pause();
  };

  // 点击进度条
  onProcessClick = e => {
    this.setProcess(e, "click");
  };

  // 设置进度条进度
  setProcess = (e, key) => {
    // 获取当前点击偏移宽度
    let offsetWidth = e.pageX - this.processPlayed.getBoundingClientRect().left;
    // 需要限制拖动范围，不能超出左右边界
    if (offsetWidth < 0) {
      offsetWidth = 0;
    }
    if (offsetWidth > this.process.offsetWidth) {
      offsetWidth = this.process.offsetWidth;
    }
    // 计算偏移比例
    const offsetPercentage = offsetWidth / this.process.offsetWidth;
    // 计算当前时间
    const currentTime = this.audio.duration * offsetPercentage;
    if (key === "click" || key === "dragMove") {
      // 设置当前进度条偏移位置
      this.processPlayed.style.width = `${offsetWidth}px`;
      this.processItem.style.left = `${offsetWidth - 4}px`;
      this.setState({ currentTime: this.getTime(currentTime) });
    }
    // 设置当前音乐进度 拖拽不需要及时计算播放进度，会导致音乐像快进一样的效果，体验很差，点击进度条是需要及时设置当前播放进度的
    if (key === "dragEnd" || key === "click") {
      this.audio.currentTime = currentTime;
    }
  };

  //  进度条item MouseDown
  onProcessItemMouseDown = e => {
    // 阻止事件冒泡
    e.stopPropagation();
    // 按下后置item为可拖动状态
    this.setState({ processItemMove: true });
  };
  //  进度条item MouseMove
  onProcessItemMouseMove = e => {
    // 阻止事件冒泡
    e.stopPropagation();
    const { processItemMove } = this.state;
    if (processItemMove) {
      this.setProcess(e, "dragMove");
    }
  };
  //  进度条item MouseUp
  onProcessItemMouseUp = e => {
    const { processItemMove } = this.state;
    // 阻止事件冒泡
    e.stopPropagation();
    // 这里的判断是关键，一定要判断是处于processItemMove=true的状态，表示当前正在拖动进度条，不然会导致mouseUp和onClick事件的传播问题
    if (processItemMove) {
      this.setState({ processItemMove: false });
      // 松开后置item为禁止拖动的状态
      this.setProcess(e, "dragEnd");
    }
  };

  // 当前音乐播放结束后下一首音乐处理 根据当前的播放模式决定下一首音乐是什么
  endedPlayMusic = () => {
    const { playMode, currentMusic } = this.state;
    const { musicList } = this.state;
    if (musicList.length > 0 && currentMusic) {
      const currentIndex = musicList.findIndex(item => {
        return item.id === currentMusic.id;
      });
      // 列表循环
      if (playMode === 1) {
        if (musicList[currentIndex + 1]) {
          this.setState({ currentMusic: musicList[currentIndex + 1] }, () => {
            this.onSwitchAction();
          });
        } else {
          this.setState({ currentMusic: musicList[0] }, () => {
            this.onSwitchAction();
          });
        }
      }
      // 列表随机
      else if (playMode === 2) {
        const randomIndex = Math.floor(Math.random() * 3 + 1);
        if (musicList[randomIndex + 1]) {
          this.setState({ currentMusic: musicList[randomIndex + 1] }, () => {
            this.onSwitchAction();
          });
        } else {
          this.setState({ currentMusic: musicList[0] }, () => {
            this.onSwitchAction();
          });
        }
      }
      // 单曲循环
      else if (playMode === 3) {
        this.onSwitchAction();
      }
    } else {
      // 当前播放列表已经空了，则不自动切歌，播放完毕后，直接重置当前的播放的音乐
      this.onSwitchAction();
    }
  };

  // 下一首歌
  nextMusic = () => {
    const { currentMusic } = this.state;
    const { musicList } = this.state;
    if (musicList.length > 1 && currentMusic) {
      const currentIndex = musicList.findIndex(item => {
        return item.id === currentMusic.id;
      });
      if (musicList[currentIndex + 1]) {
        this.setState({ currentMusic: musicList[currentIndex + 1] }, () => {
          this.onSwitchAction();
        });
      } else {
        this.setState({ currentMusic: musicList[0] }, () => {
          this.onSwitchAction();
        });
      }
    } else {
      this.audio.currentTime = 0;
      this.onSwitchAction();
    }
  };
  // 上一首歌
  previousMusic = () => {
    const { currentMusic } = this.state;
    const { musicList } = this.state;
    if (musicList.length > 1 && currentMusic) {
      const currentIndex = musicList.findIndex(item => {
        return item.id === currentMusic.id;
      });
      if (musicList[currentIndex - 1]) {
        this.setState({ currentMusic: musicList[currentIndex - 1] }, () => {
          this.onSwitchAction();
        });
      } else {
        this.setState({ currentMusic: musicList[musicList.length - 1] }, () => {
          this.onSwitchAction();
        });
      }
    } else {
      this.audio.currentTime = 0;
      this.onSwitchAction();
    }
  };

  // 切歌后相关操作，如果正在播放中，则切歌后还是会直接播放，如果处于暂停，则切歌后不会直接播放
  onSwitchAction = () => {
    // const { isPause } = this.state;
    // 处于暂停标志，则表示正在播放中，则重置进度条后，直接调用播放，否则就只重置进度条，不调用播放  弃用逻辑
    //切歌后播放
    this.resetProcess();
    if(this.state.currentMusic.needInit) {
      this.audio.currentTime = 0;
      this.onPause();
      let musicList = this.state.musicList;
      let id = this.state.currentMusic.id;
      const index = musicList.findIndex(item => {
        return item.id === id;
      });
      if (index !== -1) {
        this.initMusic('初始化音乐', index)
        this.setState({currentMusic: musicList[index]}, () => {
          this.resetProcess();
          this.onPlay();
        });
      }
    }else
      this.onPlay();
    // if (isPause) {
    //
    // }
  };

  // 重新设置当前缓存和播放进度状态，用于切歌后的进度条显示
  resetProcess = () => {
    this.processPlayed.style.width = "0px";
    this.processItem.style.left = "-4px";
  };

  // 音量控制条显示隐藏
  onVolumeControl = () => {
    const { volumeControl } = this.state;
    this.setState({ volumeControl: !volumeControl });
  };

  // 隐藏音量设置条
  onVolumeControlHide = () => {
    const { volumeControl } = this.state;
    if (volumeControl) {
      this.setState({ volumeControl: false });
    }
  };
  // 初始化音量
  initVolumeProcess = () => {
    // 获取当前音量条高度
    const processLength = this.volumeProcess.offsetHeight;
    // 设置进度条
    this.volumeProcessCurrent.style.height = `${processLength / 2}px`;
    // 设置进度条item
    this.volumeProcessItem.style.bottom = `${processLength / 2 - 6}px`;
    // 设置音量
    this.audio.volume = 0.5;
  };

  // 音量控制条点击
  onVolumeProcessSet = e => {
    // 获取当前音量条高度
    const processLength = this.volumeProcess.offsetHeight;

    // 获取当前点击偏移量
    let volumeOffsetHeight =
      processLength -
      (e.clientY - this.volumeProcess.getBoundingClientRect().top);

    // 当前音量进度比例
    let volumepercentage = 0;
    if (volumeOffsetHeight < 0) {
      volumeOffsetHeight = 0;
    }
    if (volumeOffsetHeight > processLength) {
      volumeOffsetHeight = processLength;
    }
    volumepercentage = volumeOffsetHeight / processLength;
    // 设置进度条
    this.volumeProcessCurrent.style.height = `${volumeOffsetHeight}px`;
    // 设置进度条item
    this.volumeProcessItem.style.bottom = `${volumeOffsetHeight - 6}px`;
    // 设置音量
    this.audio.volume = volumepercentage;
  };

  // 音量item鼠标按下方法监听
  onVolumeProcessItemMouseDown = () => {
    // 设置当前进入可拖动状态
    this.setState({ volumeProcessItemMove: true });
  };

  // 音量item鼠标抬起方法监听
  onVolumeProcessItemMouseUp = e => {
    const { volumeProcessItemMove } = this.state;
    if (volumeProcessItemMove) {
      this.setState({ volumeProcessItemMove: false });
    }

  };

  // 音量item鼠标拖拽方法监听
  onVolumeProcessItemMove = e => {
    const { volumeProcessItemMove } = this.state;
    if (volumeProcessItemMove) {
      this.onVolumeProcessSet(e);
    }
  };

  // 设置音乐播放模式
  onPlayModeChange = () => {
    const { playMode } = this.state;
    if (playMode === 3) {
      this.setState({ playMode: 1 });
    } else {
      this.setState({ playMode: playMode + 1 });
    }
    this.saveLocalStorage();
  };


  onFolder = () => {
    const { currentMusic } = this.state;
    PubSub.publish("addMenuSong",currentMusic)
  };
  // 歌单列表控制
  onMusicList = () => {
    const { isMusicListShow } = this.state;
    this.setState({ isMusicListShow: !isMusicListShow });
  };


  onCollect = () => {

    PubSub.publish("addMenuSong",this.state.musicList)
  };

  onAddFile = (e, item) => {
    e.stopPropagation();

    PubSub.publish("addMenuSong",item)
  };
  initMusicDownload =  async (index) => {
    let data = this.state.musicList[index];
    let flag = true;
    if(data.from === '163'){
      await get163PlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          pre[index] = {
            ...pre[index],
            ...r
          }
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id')})

        }

      })
    }else if(data.from === 'qq'){
      await getQPlayMusic(data.id,data.albumId,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            from:data.from,
            ...r,
            time: data.times,
            ...pre[index]
          }
          pre[index] = n;
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id')})
        }
      })
    }else if(data.from === 'kugou'){
      await getKgPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          pre[index] = {
            ...pre[index],
            ...r
          }
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id')})
        }

      })
    }else if(data.from === 'kuwo'){
      await getKwPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {

          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            img: data.img,
            ...pre[index]
          }
          pre[index] = n;
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id')})
        }

      })
    }else if(data.from === 'migu'){
      await getMgPlayMusic(data.id,(r) => {
        if(r === -1){
          this.handleVIP();
          flag = false;
          this.state.currentMusic.source = "";
          this.state.currentMusic.needInit = false;
        }else {
          let pre = this.state.musicList;
          let n = {
            id: data.id,
            title: data.name,
            info: data.singer,
            ...r,
            time: data.times,
            from:data.from,
            ...pre[index]
          }
          pre[index] = n;
          pre[index].needInit = false;
          this.setState({musicList: _.uniqBy(pre, 'id')})
        }
      })
    }
    this.onSwitchAction();
    if(flag) {
      this.saveLocalStorage();
    }
  }

  onUploadMusic = (e, item,index) => {
    e.stopPropagation();

    if(this.state.musicList[index].needInit){
      this.initMusicDownload(index).then((r) => {
       //console.log(this.state.musicList[index].resource);
        let url = this.state.musicList[index].resource;
        if ((url.substring(5, 7) === "//") || (url.substring(6, 8) === "//")){
          this.saveAs(url,item.title);
        }
      })
    }else {
     //console.log('有了！'+ this.state.musicList[index].resource);
      let url = this.state.musicList[index].resource;
      if ((url.substring(5, 7) === "//") || (url.substring(6, 8) === "//")){
        this.saveAs(url,item.title);
      }

    }
  };


  saveAs = (url, name) => {
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = url;
    save_link.download = name;
    save_link.click();
  }
  // 删除指定歌曲
  onDeleteMusic = (e, i) => {
    e.stopPropagation();
    let id = i.id;
    const {musicList} = this.state;
    const newMusicList = [];
    musicList.forEach(item => {
      if (item.id !== id) {
        newMusicList.push(item);
      }
    });
    this.setState({musicList: newMusicList});
    this.saveLocalStorage();
  };

  // 删除当前全部歌曲
  onDeleteAllMusic = () => {
    this.setState({musicList: []});
    this.state.musicList = [];
    this.saveLocalStorage();
    //console.log(this.loadLocalStorage())
  };

  saveLocalStorage = () => {
    //console.log(this.state)
    store.set('AudioPlayState',JSON.stringify(this.state))
  }
  loadLocalStorage = () => {
    let s = store.get('AudioPlayState');
    let result;
    if(s && s !== ''){
      result = JSON.parse(s);
    }else {
      result = undefined;
    }

    return result
  }


  // 歌单切歌
  onMusicListItemClick = id => {
    const { musicList } = this.state;
    const { currentMusic } = this.state;
    const index = musicList.findIndex(item => {
      return item.id === id;
    });
    if (index !== -1) {
      // 当前播放的音乐和点击的音乐相同，则重置播放时间
      if(musicList[index].needInit){
        this.audio.currentTime = 0;
        this.onPause();
        this.initMusic('初始化音乐',index)
        this.setState({currentMusic: musicList[index]}, () => {
          this.resetProcess();
          this.onPlay();
        });
      }else {
        if (currentMusic.id === id) {
          this.resetProcess();
          this.audio.currentTime = 0;
          this.onPlay();
        } else {
          this.setState({currentMusic: musicList[index]}, () => {
            this.resetProcess();
            this.onPlay();
          });
        }
      }
    }
  };
  handleVIP = () => {
    this.onPause();
    this.setState({open:true})
  };

  handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    this.setState({open:false})
  };

  lineRenderer = ({ index,active, line }) => {
    if(!active)
      return (
          <p>{line.content}</p>
      )
    else
      return <p style={{color:"rgba(254,255,254,0.53)"}}>{'>> '+line.content+' <<'}</p>
  }

  render() {
    const {
      currentMusic,
      isPause,
      totalTime,
      currentTime,
      volumeControl,
      playMode,
      isMusicListShow
    } = this.state;
    const { title, info, img, resource, id } = currentMusic || {};
    const { musicList } = this.state;
    let playModeIcon = "";
    switch (playMode) {
      case 1:
        playModeIcon = "icon-circulation-list";
        break;
      case 2:
        playModeIcon = "icon-circulation-random";
        break;
      case 3:
        playModeIcon = "icon-circulation-single";
        break;
      default:
        playModeIcon = "icon-circulation-list";
        break;
    }
    return (
      <div className="mainLayout">
        <div
          className="mainContent"
          onMouseMove={this.onProcessItemMouseMove}
          onMouseUp={this.onProcessItemMouseUp}
        >
          <Loading open={this.state.loading}/>
          <div className="playContent">
            {/* 左侧控制器，播放，上一首，下一首 */}
            <div className="left-controler">
              <span
                className="icon-prev prev-next-icon"
                onClick={this.previousMusic}
              />
              {isPause ? (
                <span className="icon-pause playIcon" onClick={this.onPause} />
              ) : (
                <span className="icon-play playIcon" onClick={this.onPlay} />
              )}
              <span
                className="icon-next prev-next-icon"
                onClick={this.nextMusic}
              />
            </div>
            {/* 主播放界面，缩略图，作者信息，进度条等 */}
            <div className="main-controler">
              <img src={img} alt="" className="thumbnail" />
              <div className="music-control">
                <div className="music-info">
                  <span className="title-info">{title}</span>
                  <span className="author-info">{info}</span>
                </div>
                <div className="process-time">
                  <div
                    className="process-wrapper"
                    onClick={this.onProcessClick}
                    ref={ref => (this.process = ref)}
                  >
                    <div className="process">
                      <div
                        className="progress-buffered"
                        ref={ref => (this.processBuffered = ref)}
                      />
                      <div
                        className="progress-played"
                        ref={ref => (this.processPlayed = ref)}
                      >
                        <div
                          className="process-item"
                          ref={ref => (this.processItem = ref)}
                          onMouseDown={this.onProcessItemMouseDown}
                          // onMouseUp={this.onProcessItemMouseUp}
                        >
                          <div className="process-item-inside" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="time">
                    <span className="current-time">{currentTime}</span>/
                    <span className="total-time">{totalTime}</span>
                  </div>
                </div>
              </div>
            </div>
            {/* 右侧音量调节，循环调节，歌单查看 */}
            <div className="right-controler">
              {/*加入歌单*/}
              <span className="icon-folder folder" onClick={this.onFolder} />
              {/* 音量控制条，这里采用的是style控制，因为需要获取到音量条的ref，如果不存在这个节点，就获取不到ref*/}
              <div
                className="volume-controler"
                style={{ visibility: volumeControl ? "visible" : "hidden" }}
                onMouseMove={this.onVolumeProcessItemMove}
                onMouseUp={this.onVolumeProcessItemMouseUp}
              >
                <div
                  className="volume-process"
                  onClick={this.onVolumeProcessSet}
                  ref={ref => (this.volumeProcess = ref)}
                >
                  <div
                    className="volume-current"
                    ref={ref => (this.volumeProcessCurrent = ref)}
                  >
                    <div
                      className="volume-item"
                      ref={ref => (this.volumeProcessItem = ref)}
                      onMouseDown={this.onVolumeProcessItemMouseDown}
                      onMouseUp={this.onVolumeProcessItemMouseUp}
                    >
                      <div className="volume-item-inside" />
                    </div>
                  </div>
                </div>
              </div>
              <span
                className="icon-volume volume"
                onClick={this.onVolumeControl}
              />
              <span
                className={`${playModeIcon} circulation`}
                onClick={this.onPlayModeChange}
              />
              <span className="icon-list list" onClick={this.onMusicList} />
            </div>
            {/* 歌单组件 */}
            <Fade in={isMusicListShow}>

              <div className="musicList">
                    <div className="music-list-head">
                      <h4 className="music-list-head-title">
                        播放列表(
                        <span>
                        {musicList && musicList.length ? musicList.length : 0}
                      </span>
                        )
                      </h4>
                      <span
                          className="music-list-head-collect"
                          onClick={this.onCollect}
                      >
                      <span className="icon-addfile music-list-common-icon" />
                      <span className="music-list-common-text">收藏全部</span>
                    </span>
                      <span className="music-list-head-line" />
                      <span
                          className="music-list-head-clear"
                          onClick={this.onDeleteAllMusic}
                      >
                      <span className="icon-clear music-list-common-icon" />
                      <span className="music-list-common-text">清除</span>
                    </span>
                      <p className="music-list-head-name">{title}</p>
                      <span className="music-list-head-close">
                      <span
                          className="icon-close music-list-common-icon"
                          onClick={this.onMusicList}
                      />
                    </span>
                    </div>
                    <div className="music-list-body">
                      <div className="music-list-body-content">
                        <ul className="music-list-body-ul">
                          {musicList &&
                              musicList.length > 0 &&
                              musicList.map((item,index) => {
                                return (
                                    <li
                                        className={`music-list-li ${id === item.id &&
                                        "music-current"}`}
                                        onClick={() => this.onMusicListItemClick(item.id)}
                                        key={item.id}
                                    >
                                      <div className="col music-list-li-col-1">
                                        {id === item.id && (
                                            <span className="play-triangle-icon icon-currentPlay" />
                                        )}
                                      </div>
                                      <div className="col music-list-li-col-2">
                                  <span className="music-list-li-text">
                                    {item.title}
                                  </span>
                                      </div>
                                      <div className="col music-list-li-col-3">
                                  <span
                                      className="icon-addfile music-list-action-icon"
                                      onClick={e => this.onAddFile(e, item)}
                                  />
                                        <span
                                            className="icon-download music-list-action-icon"
                                            onClick={e => this.onUploadMusic(e, item,index)}
                                        />
                                        <span
                                            className="icon-clear music-list-action-icon"
                                            onClick={e => this.onDeleteMusic(e, item)}
                                        />
                                      </div>
                                      <div className="col music-list-li-col-4">
                                  <span className="music-list-li-text">
                                    {item.info}
                                  </span>
                                      </div>
                                      <div className="col music-list-li-col-5">
                                  <span className="music-list-li-text">
                                    {item.time}
                                  </span>
                                      </div>
                                      <div className="col music-list-li-col-6">
                                        {/*<span className="icon-link music-list-action-icon" />*/}
                                        <FromIco from={item.from}/>
                                      </div>
                                    </li>
                                );
                              })}
                        </ul>
                      </div>
                      <div className="music-list-body-lyric">
                        <Grid container
                              direction="row"
                              justifyContent="center"
                              alignItems="flex-center"
                        >
                          <Grid item xs={12}>
                            <Lrc
                                style={{height:260,marginLeft:15}}
                                lrc={this.state.lrcString}
                                currentMillisecond={this.state.lrcNow}
                                lineRenderer={this.lineRenderer}
                                bottomBlank={true}
                            />
                          </Grid>

                        </Grid>

                      </div>
                    </div>
                  </div>

            </Fade>

            {/* 播放器基础组件 */}
            <audio src={resource} ref={ref => (this.audio = ref)} onError={this.handleVIP} />
          </div>
        </div>
        <Snackbar open={this.state.open} autoHideDuration={6000} onClose={this.handleClose}>
          <Alert onClose={this.handleClose} severity="error" sx={{ width: '100%' }}>
            此首歌需要您登录，或这首歌可能是VIP歌曲
          </Alert>
        </Snackbar>
      </div>
    );
  }
}

export default AudioPlay;
